<div class="ui attached stackable menu">
  <div class="item">
    <span [attr.data-tooltip]="'OpenCog-TT' | translate" data-position="bottom left">
      <a href="http://opencog.org/" target="_blank" class="ui mini image">
        <img src="../../../assets/img/Logo.png" alt="OpenCog">
      </a>
    </span>
  </div>
  <a class="item" routerLink="/fetch">
    <span [attr.data-tooltip]="'Fetch-TT' | translate" data-position="bottom left">
      <i class="icon large cloud download"></i> {{ 'Fetch' | translate }}
    </span>
  </a>
  <a class="item" routerLink="/cog-visualizer">
    <span [attr.data-tooltip]="'Visualize-TT' | translate" data-position="bottom center">
      <i class="icon large share alternate"></i> {{ 'Visualize' | translate }}
    </span>
  </a>
  <div class="ui secondary stackable right menu">
    <div class="ui dropdown item">
      <span [attr.data-tooltip]="'Language-TT' | translate" data-position="bottom center">
        <i class="large icon translate"></i> {{ 'Language' | translate }}
        <i class="large icon dropdown"></i>
      </span>
      <div class="menu">
        <a class="item" *ngFor="let lang of supportedLanguages" (click)="selectLang(lang.value)"><i class="{{ lang.flag }} flag"></i> {{ lang.display | translate }}</a>
      </div>
    </div>
  </div>
</div>

<router-outlet></router-outlet>